<template>
  <ex-dialog width="30%" class="ex-diolog" :title="title" :visible="visible" @closeDialog="handleClose">
    <div class="main" :loading="loading">
      <el-form :rules="rules" :model="formInline" ref="ruleForm" class="demo-form-inline" label-width="100px">
        <el-form-item label="入口名称：" prop="name"  key="1">
          <el-input v-model="formInline.name" placeholder="请填写入口名称" maxlength="20" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="页面路径：" prop="url"  key="12">
          <el-input v-model="formInline.url" placeholder="请填写页面路径"></el-input>
        </el-form-item>
        <el-form-item label="入口图标：" prop="logo"  ref="businessLicenseImg" key="3">
          <el-checkbox-group v-model="formInline.logo" v-show="false"></el-checkbox-group>
          <ImageUploadMoreOldUrl :limit="1" :fileSize="5" v-model="formInline.logo"> </ImageUploadMoreOldUrl>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer">
      <div>
        <el-button type="primary" @click="agreeClick('ruleForm')" :loading="editLoading">保存提交</el-button>
        <el-button type="danger" @click="handleClose">取消</el-button>
      </div>
    </div>
  </ex-dialog>
</template>
<script>
// components
import ImageUploadMoreOldUrl from "@/components/ImageUploadMoreOldUrl"
// api
import {
  addQuickEntryV1, updateQuickEntryV1, quickEntryV1Detail
} from '@/api/index'

export default {
  components: {
    ImageUploadMoreOldUrl
  },
  props: {
    visible: Boolean,
    id: String,
  },
  data() {
    return {
      loading: false,
      editLoading:false,
      title:'',
      formInline: {
        name: '',//入口名称
        url: '', //页面路径
        logo: '',//	入口图标
      },
      rules: {
        name: [
          { required: true, message: '请填写入口名称', trigger: 'blur' }
        ],
        url: [
          { required: true, message: '请填写页面路径', trigger: 'blur' }
        ],
        logo: [
          { required: true, message: '请上传入口图标', trigger: 'change' }
        ],
      }
    }
  },
  created() {
    if (this.id != '') {
      this.title = '编辑快捷入口'
      this.getDetail()
    } else {
      this.title = '新增快捷入口'
    }
  },
  methods: {
    // 获取详情
    getDetail() {
      this.loading = true
      quickEntryV1Detail(this.id).then(res => {
        console.log('获取详情', res)
        const { result } = res
        this.formInline = result

      }).finally(() => {
        this.loading = false
      })
    },
    //保存提交 
    agreeClick(formName) {
      this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.id != '') {
        this.updateDetail()
      } else {
        this.addDetail()
      }
          } else {
            console.log('error submit!!');
            return false;
          }
        });

    },
    // 编辑 快捷入口排序
    updateDetail() {
      this.editLoading = true
      var data = {
        ...this.formInline,
        id: this.id
      }
      updateQuickEntryV1(data).then(res => {
        setTimeout(() => {
          this.$message.success('修改成功')
          this.editLoading = false
          this.$emit('success')
          this.handleClose()
        }, 1000)

      }).catch(() => {
        this.loading = false
      })
    },
    // 新增 快捷入口
    addDetail() {
      this.editLoading = true
      var data = {
        ...this.formInline,
      }
      addQuickEntryV1(data).then(res => {
        setTimeout(() => {
          this.$message.success('添加成功')
          this.editLoading = false
          this.$emit('success')
          this.handleClose()
        }, 1000)

      }).catch(() => {
        this.loading = false
      })
    },
    handleClose() {
      this.$emit('update:visible', false)
    },

  }
}
</script>
<style lang="scss" scoped>
.ex-diolog {
  ::v-deep .ex--dialog--footer {
    border: none !important;
    .el-button{
      margin: 10px;
    }
  }

}
</style>
